<%--
  Created by IntelliJ IDEA.
  User: 杨娇
  Date: 2025/7/3
  Time: 21:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绿能充 - 充电桩地图</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <style>
    :root {
      --primary-color: #00a896;
      --secondary-color: #02c39a;
      --dark-color: #05668d;
      --light-color: #f0f3bd;
      --accent-color: #028090;
      --text-dark: #333;
      --text-light: #f8f9fa;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Noto Sans SC', sans-serif;
      color: var(--text-dark);
      background-color: #f9f9f9;
      min-height: 100vh;
      display: flex;
    }

    /* 侧边栏样式 - 保持不变 */
    .sidebar {
      width: 250px;
      background: linear-gradient(135deg, var(--dark-color) 0%, var(--primary-color) 100%);
      color: white;
      padding: 20px 0;
      height: 100vh;
      position: fixed;
      box-shadow: var(--shadow);
      z-index: 1000;
    }

    .sidebar-header {
      padding: 0 20px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: 20px;
    }

    .sidebar-header .logo {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }

    .sidebar-header .logo-icon {
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      font-size: 18px;
      color: var(--light-color);
    }

    .sidebar-header h3 {
      font-size: 1.2rem;
      font-weight: 500;
      margin: 0;
    }

    .sidebar-header p {
      font-size: 0.8rem;
      opacity: 0.8;
      margin: 0;
    }

    .nav-menu {
      list-style: none;
      padding: 0 15px;
    }

    .nav-item {
      margin-bottom: 5px;
    }

    .nav-link {
      display: flex;
      align-items: center;
      padding: 12px 15px;
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      border-radius: 8px;
      transition: var(--transition);
    }

    .nav-link:hover, .nav-link.active {
      background-color: rgba(255, 255, 255, 0.1);
      color: white;
    }

    .nav-link i {
      margin-right: 10px;
      width: 20px;
      text-align: center;
      font-size: 16px;
    }

    .user-profile {
      position: absolute;
      bottom: 20px;
      left: 0;
      width: 100%;
      padding: 0 20px;
    }

    .user-info {
      display: flex;
      align-items: center;
      padding: 10px;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      cursor: pointer;
      transition: var(--transition);
    }

    /* 主内容区样式 */
    .main-content {
      flex: 1;
      margin-left: 250px;
      padding: 0;
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 30px;
      background-color: white;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      z-index: 500;
    }

    .page-title h1 {
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--dark-color);
      margin-bottom: 5px;
    }

    .page-title p {
      color: #777;
      font-size: 0.9rem;
      margin: 0;
    }

    .map-container {
      flex: 1;
      position: relative;
    }

    #map {
      height: 100%;
      width: 100%;
    }

    .map-controls {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 400;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .map-btn {
      width: 40px;
      height: 40px;
      background-color: white;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow);
      cursor: pointer;
      transition: var(--transition);
      color: var(--text-dark);
      border: none;
    }

    .map-btn:hover {
      background-color: var(--primary-color);
      color: white;
    }

    .station-marker {
      background-color: var(--primary-color);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      box-shadow: 0 0 0 3px rgba(0, 168, 150, 0.3);
    }

    .station-marker.busy {
      background-color: #f44336;
    }

    .station-marker.available {
      background-color: #4caf50;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
      .sidebar {
        width: 70px;
        overflow: hidden;
      }

      .sidebar-header h3,
      .sidebar-header p,
      .nav-link span,
      .user-name,
      .user-role {
        display: none;
      }

      .sidebar-header {
        padding: 15px 10px;
      }

      .nav-link {
        justify-content: center;
        padding: 12px 0;
      }

      .nav-link i {
        margin-right: 0;
        font-size: 18px;
      }

      .main-content {
        margin-left: 70px;
      }
    }

    @media (max-width: 768px) {
      .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 15px;
      }
    }
  </style>
</head>
<body>
<!-- 侧边导航栏 -->
<div class="sidebar">
  <div class="sidebar-header">
    <div class="logo">
      <div class="logo-icon">
        <i class="fas fa-charging-station"></i>
      </div>
      <div>
        <h3>绿能充</h3>
        <p>充电桩地图</p>
      </div>
    </div>
  </div>

  <ul class="nav-menu">
    <li class="nav-item">
      <a href="/user/home${user.id}" class="nav-link">
        <i class="fas fa-tachometer-alt"></i>
        <span>仪表盘</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/user/announcement/list" class="nav-link">
        <i class="fas fa-bullhorn"></i>
        <span>公告栏</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/user/pile/list" class="nav-link active">
        <i class="fas fa-charging-station"></i>
        <span>充电桩</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/user/pile/map" class="nav-link">
        <i class="fas fa-map-marked-alt"></i>
        <span>地图</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/user/center/personCenter/${user.id}" class="nav-link">
        <i class="fas fa-user"></i>
        <span>个人中心</span>
      </a>
    </li>
  </ul>

  <div class="user-profile">
    <div class="user-info">
      <div class="user-avatar">
        <i class="fas fa-user"></i>
      </div>
      <div>
        <div class="user-name">用户</div>
        <div class="user-role">普通用户</div>
      </div>
    </div>
  </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
  <div class="header">
    <div class="page-title">
      <h1>充电桩地图</h1>
      <p>查找附近的充电桩站点</p>
    </div>
    <div class="header-actions">
      <button id="locate-btn" class="map-btn">
        <i class="fas fa-location-arrow"></i>
      </button>
    </div>
  </div>

  <div class="map-container">
    <div id="map"></div>
    <div class="map-controls">
      <button id="zoom-in-btn" class="map-btn" title="放大">
        <i class="fas fa-plus"></i>
      </button>
      <button id="zoom-out-btn" class="map-btn" title="缩小">
        <i class="fas fa-minus"></i>
      </button>
      <button id="filter-available-btn" class="map-btn" title="只显示可用充电桩">
        <i class="fas fa-bolt"></i>
      </button>
    </div>
  </div>
</div>

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 初始化地图，以中国为中心
    const map = L.map('map').setView([35.86166, 104.195397], 5);

    // 添加OpenStreetMap底图
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // 模拟充电桩数据（不从数据库获取）
    const chargingStations = [
      {
        id: 1,
        name: "北京充电站",
        lat: 39.9042,
        lng: 116.4074,
        status: "available",
        available: 4,
        total: 6
      },
      {
        id: 2,
        name: "上海充电站",
        lat: 31.2304,
        lng: 121.4737,
        status: "available",
        available: 2,
        total: 4
      },
      {
        id: 3,
        name: "广州充电站",
        lat: 23.1291,
        lng: 113.2644,
        status: "busy",
        available: 0,
        total: 8
      },
      {
        id: 4,
        name: "深圳充电站",
        lat: 22.5431,
        lng: 114.0579,
        status: "available",
        available: 3,
        total: 5
      },
      {
        id: 5,
        name: "成都充电站",
        lat: 30.5728,
        lng: 104.0668,
        status: "available",
        available: 6,
        total: 8
      }
    ];

    // 添加充电桩标记
    const markers = [];
    chargingStations.forEach(station => {
      const marker = L.marker([station.lat, station.lng], {
        icon: L.divIcon({
          className: 'station-icon',
          html: `<div class="station-marker ${station.status}">
                              <i class="fas fa-charging-station"></i>
                           </div>`,
          iconSize: [24, 24]
        })
      }).addTo(map);

      marker.bindPopup(`
                <div style="min-width: 200px">
                    <h3 style="margin: 0 0 5px 0; color: var(--dark-color)">${station.name}</h3>
                    <p style="margin: 5px 0; color: ${station.status == 'available' ? '#4caf50' : '#f44336'}">
                        <i class="fas fa-${station.status == 'available' ? 'check-circle' : 'times-circle'}"></i>
                        ${station.status == 'available' ? '有空闲' : '已满'}
                    </p>
                    <p style="margin: 5px 0">
                        <i class="fas fa-plug"></i> 可用充电桩: ${station.available}/${station.total}
                    </p>
                    <button onclick="navigateToStation(${station.id})"
                            style="background: var(--primary-color); color: white; border: none;
                                   padding: 5px 10px; border-radius: 4px; cursor: pointer;
                                   margin-top: 5px; width: 100%">
                        导航至此
                    </button>
                </div>
            `);

      markers.push(marker);
    });

    // 定位按钮功能
    document.getElementById('locate-btn').addEventListener('click', function() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
                position => {
                  map.setView([position.coords.latitude, position.coords.longitude], 15);
                  L.marker([position.coords.latitude, position.coords.longitude], {
                    icon: L.divIcon({
                      className: 'user-location-icon',
                      html: '<div style="background-color: #4285F4; width: 16px; height: 16px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 5px rgba(0,0,0,0.3)"></div>',
                      iconSize: [22, 22]
                    })
                  }).addTo(map).bindPopup('您的位置').openPopup();
                },
                error => {
                  alert('无法获取您的位置: ' + error.message);
                }
        );
      } else {
        alert('您的浏览器不支持地理定位功能');
      }
    });

    // 缩放按钮功能
    document.getElementById('zoom-in-btn').addEventListener('click', function() {
      map.zoomIn();
    });

    document.getElementById('zoom-out-btn').addEventListener('click', function() {
      map.zoomOut();
    });

    // 过滤可用充电桩
    document.getElementById('filter-available-btn').addEventListener('click', function() {
      const btn = this;
      btn.classList.toggle('active');

      if (btn.classList.contains('active')) {
        btn.innerHTML = '<i class="fas fa-bolt" style="color: #4caf50"></i>';
        markers.forEach(marker => {
          const station = chargingStations.find(s =>
                  s.lat === marker.getLatLng().lat && s.lng === marker.getLatLng().lng
          );
          if (station.status !== 'available') {
            map.removeLayer(marker);
          }
        });
      } else {
        btn.innerHTML = '<i class="fas fa-bolt"></i>';
        markers.forEach(marker => {
          if (!map.hasLayer(marker)) {
            map.addLayer(marker);
          }
        });
      }
    });
  });

  // 导航到充电站函数
  function navigateToStation(stationId) {
    alert('导航至充电站 ID: ' + stationId + '\n(此处可以集成实际导航功能)');
    // 实际应用中这里可以调用导航API或打开导航应用
  }
</script>
</body>
</html>
